<template>
  <div class="opinion">
    <div class="content">
      <textarea class="advice" id="userAdvice" placeholder="请输入您遇到的问题......"></textarea>
      <input class="contact" id="userContact" placeholder="请输入您联系方式 手机号/邮箱 (非必填)"/>
      <span class="btn-submit" @click="submitAdvice">提交反馈</span>
    </div>
    <div class="opinion-footer">
      <v-footer></v-footer>
    </div>
    <back></back>
  </div>
</template>

<script type="text/ecmascript-6">
  import VFooter from '../../common/footer/footer'
  import back from '../../common/back/back'
  export default {
    methods: {
      submitAdvice() {
        let advice = document.getElementById('userAdvice').value
        let contact = document.getElementById('userContact').value
        if (!advice) {
          this.MessageBox('提示', '给点意见吧亲（￣3￣）')
          return false
        }
        this.$http.post('/game/index.php?m=Home&c=Api&a=addUserAdvice', {
          params: {
            advice: advice,
            contact: contact
          }
        }).then((response) => {
          if (response.data.code === this.ERROR_OK) {
            this.MessageBox('提示', '提交成功，感谢您的反馈！').then(action => {
              document.getElementById('userAdvice').value = ''
              document.getElementById('userContact').value = ''
            })
          } else {
            this.MessageBox('提示', '服务器繁忙，请稍后再试！')
          }
        })
      }
    },
    created() {
      this.$nextTick(() => {
        this.Indicator.close()
      })
    },
    components: {
      VFooter,
      back
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .opinion
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    background #fff
    z-index 10
    overflow hidden
    .content
      display flex
      flex-direction column
      padding 32px
      .advice, .contact
        width 100%
        font-size 30px
        border 2px solid rgba(0, 0, 0, .2)
        box-sizing border-box
      .advice
        padding 24px
        height 380px
      .contact
        margin-top 16px
        padding 0 24px
        height 68px
      .btn-submit
        margin-top 32px
    .opinion-footer
      position absolute
      width 100%
      top 900px
      left 0
</style>
